<template>
  <div class="baseInfoWrap" v-loading="loading">
    <el-card class="cardWrap">
      <div slot="header" class="clearfix">
        <span>企业基本信息</span>
        <el-button
            @click="getInfo"
            style="float: right; padding: 6px 2px"
            type="primary"
        >
          获取纳税人基本信息
        </el-button>
      </div>
      <div style="width: 100%">
        <el-row>
          <el-col :span="8">
            <div class="qiyeC">
              <span>纳税人名称 ：</span>
              <span class="colorGray">{{ detailInfo.nsrmc }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="qiyeC">
              <span>纳税人识别号/统一社会信用代码 ：</span>
              <span class="colorGray">{{ detailInfo.nsrsbh }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="qiyeC">
              <span>登记序号 ：</span>
              <span class="colorGray">{{ detailInfo.djxh }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="qiyeC">
              <span>税收档案编号 ：</span>
              <span class="colorGray">{{ detailInfo.ssdabh }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="qiyeC">
              <span>纳税人类型标签 ：</span>
              <span class="colorGray">{{ detailInfo.nsrlx }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="qiyeC">
              <span>生产经营地址 ：</span>
              <span class="colorGray">{{ detailInfo.scjydz }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="qiyeC">
              <span>注册地邮政编码 ：</span>
              <span class="colorGray">{{ detailInfo.zcdyzbm }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="qiyeC">
              <span>注册地联系电话 ：</span>
              <span class="colorGray">{{ detailInfo.zcdlxdh }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="qiyeC">
              <span>法人名称（法定代表人姓名） ：</span>
              <span class="colorGray">{{ detailInfo.fddbrxm }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="qiyeC">
              <span>登记注册类型（国标） ：</span>
              <span class="colorGray">{{ detailInfo.djzclxdm }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="qiyeC">
              <span>行业代码 ：</span>
              <span class="colorGray">{{ detailInfo.hydm }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="qiyeC">
              <span>企业行业性质 ：</span>
              <span class="colorGray">{{ detailInfo.qyhyxzdm }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="cardWrap">
      <div slot="header" class="clearfix">
        <span>企业税务信息</span>
      </div>
      <div style="width: 100%">
        <el-row>
          <el-col :span="8">
            <div class="qiyeC">
              <span>区县级税务机关代码 ：</span>
              <span class="colorGray">{{ detailInfo.qxjswjgdm }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="qiyeC">
              <span>税务机关代码 ：</span>
              <span class="colorGray">{{ detailInfo.zgswskfjdm }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="qiyeC">
              <span>税务机关名称 ：</span>
              <span class="colorGray">{{ detailInfo.zgswskfjmc }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="qiyeC">
              <span>开票方纳税人状态 ：</span>
              <span class="colorGray">{{ detailInfo.nsrztdm }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="qiyeC">
              <span>纳税人类型标签有效期起 ：</span>
              <span class="colorGray">{{ detailInfo.yxqq }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="qiyeC">
              <span>纳税人类型标签有效期止 ：</span>
              <span class="colorGray">{{ detailInfo.yxqz }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="qiyeC">
              <span>消费税纳税人类型 ：</span>
              <span class="colorGray">{{ detailInfo.xfsnsrlxdm }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="cardWrap">
      <div slot="header" class="clearfix">
        <span>企业财务信息</span>
      </div>
      <div style="width: 100%">
        <el-row>
          <el-col :span="8">
            <div class="qiyeC">
              <span>财务负责人姓名 ：</span>
              <span class="colorGray">{{ detailInfo.cwfzrxm }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="qiyeC">
              <span>账户名称 ：</span>
              <span class="colorGray">{{ detailInfo.khhmc }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="qiyeC">
              <span>账号 ：</span>
              <span class="colorGray">{{ detailInfo.yhzh }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="qiyeC">
              <span>企业办税人员姓名 ：</span>
              <span class="colorGray">{{ detailInfo.bsrxm }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="qiyeC">
              <span>新电票试点企业标识 ：</span>
              <span class="colorGray">{{ detailInfo.xdpsdqybz }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="qiyeC">
              <span>出口企业分类 ：</span>
              <span class="colorGray">{{ detailInfo.ckqyfldm }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="qiyeC">
              <span>总分机构类型 ：</span>
              <span class="colorGray">{{ detailInfo.zfjglxdm }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="qiyeC">
              <span>银行营业网点 ：</span>
              <span class="colorGray">{{ detailInfo.yhyywddm }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getInfos, addInfos } from '@/api/vmsEnterpriseInfo';

export default {
  name: 'baseInfo',
  data() {
    return {
      loading: false,
      detailInfo: {},
    }
  },
  created() {
    this.initInfo()
  },
  methods: {
    async initInfo() {
      this.loading = true;
      let {data, code, message} = await getInfos(
            1
      );
      if (code == 200) {
        this.detailInfo = data

      } else {

        this.$message({
          type: 'success',
          message: message,
        })
      }
      this.loading = false;
    },
    getInfo() {
      this.$alert('是否调用接口获取纳税人基本信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
        type: 'warning',
      })
          .then(async () => {
            this.loading = true;
            let {code, message} = await addInfos(
                {}
            );
            if (code == 200) {
              await this.initInfo()
            } else {
              this.$message({
                type: 'success',
                message: message,
              })
            }
            this.loading = false;
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            })
          })
    },
  },
}
</script>

<style lang="scss" scoped>
.baseInfoWrap {
  .cardWrap {
    margin-bottom: 20px;
  }

  .qiyeC {
    display: flex;
    justify-content: space-between;
    margin: 0 20px 10px 0;
  }

  &:last-child {
    margin: 0 0px 10px 0;
  }

  .colorGray {
    color: #909399;
  }
}

</style>
  